import React, {Component} from "react";
import { Link } from "react-router-dom";
import Search from "../../component/Search";
import Table from "../../component/Table";
import AddModal from "./components/AddModal";
import { formatService } from "@/utils/format";
import { formatTime } from '@/utils';
import { Button } from 'antd';
import emitter from '@/events';

class Index extends Component{

    state = {
        searchConfig: {
            columns: [
                {
                    type: 'Input',
                    name: 'schoolName',
                    placeholder: '学校名称',
                },
                {
                    type: 'Select',
                    name: 'serviceType',
                    placeholder: '服务类型',
                    options: [
                        {value: 1, text: '私有化部署'},
                        {value: 2, text: '实训服务'},
                        {value: 3, text: '私有化部署+服务'}
                    ]
                },
                {
                    type: 'RangePicker',
                    name: 'createTime',
                    range: ['startTime', 'endTime'],
                    placeholder: ["初始创建时间","结束创建时间"]
                }
            ],
            rightOpt: () => {
                return (
                    <div className="add-btn">
                        <Button type="primary" onClick={() => { emitter.emit('showModal') }}>添加学校</Button>
                    </div>
                )
            }
        },
        tableConfig: {
            columns: [
                {
                    title: '#',
                    width: 60,
                    fixed: 'left',
                    render: (text, record, index) => {
                        const {current,pageSize} = this.state.tableConfig.pagination;
                        return (current-1) * pageSize + (index+1)
                    }
                },
                {
                    title: '学校名称',
                    ellipsis: true,
                    render: (text) => <Link to={"/user/user_mg/school/"+text.id}>{text.schoolName}</Link>,
                    width: 120
                },
                {
                    title: '班级数量',
                    dataIndex: 'classCount',
                    width: 90
                },
                {
                    title: '学生人数',
                    dataIndex: 'studentCount',
                    width: 90
                },
                {
                    title: '教师人数',
                    dataIndex: 'teacherCount',
                    width: 90
                },
                {
                    title: '学校地址',
                    ellipsis: true,
                    render: (text) => `${text.province + text.city + text.region + text.detailAddress}`,
                    width: 150
                },
                {
                    title: '服务类型',
                    render: (text) => `${formatService(text.serviceType)}`,
                    width: 130
                },
                {
                    title: '备注',
                    ellipsis: true,
                    dataIndex: 'remark',
                    width: 150
                },
                {
                    title: '创建人',
                    dataIndex: 'userName',
                    width: 100
                },
                {
                    title: '创建时间',
                    render: (text) => `${formatTime(text.addTime, 16)}`,
                    width: 130
                },
                {
                    title: '操作',
                    fixed: 'right',
                    width: 80,
                    render: (text) => {
                        return <span className="update" onClick={() => { emitter.emit("showModal", text) }} >修改</span>
                    }
                },
            ],
            pagination: {
                current: 1,
                pageSize: 15
            },
            params: {
                paramsMap: {},
                sortName: "add_time",
                sortType: "desc"
            },
            request: {
                method: 'post',
                url: '/school/getSchoolPageList'
            }
        }
    };

    componentWillUnmount() {
        emitter.removeAllListeners(['showModal'])
    }

    render() {
        return (
            <div className="table-list">
                <AddModal search={this.search} />
                <Search config={this.state.searchConfig} search={this.search} />
                <Table config={this.state.tableConfig} onRef={(ref) => this.table = ref } />
            </div>
        )
    }

    // 回调
    search = (searchConfig) => {
        const { tableConfig } = this.state;
        this.setState({
            tableConfig: {
                ...tableConfig,
                pagination: {
                    current: 1,
                    pageSize: 15
                }
            }
        }, () => {
            const { params, pagination } = this.state.tableConfig;
            this.table.getTableList({...params, paramsMap: {...searchConfig}}, pagination)
        })
    }
}

export default Index;